﻿@page "/admin/friendlink"
@model Moonglade.Web.Pages.Admin.FriendLinkModel
@{
    ViewBag.Title = "Friend Links";
}

@section scripts {
    <script src="~/js/app/dataexport.js"></script>
    <script>
        var editCanvas = new bootstrap.Offcanvas(document.getElementById('editLinkCanvas'));
        var fid = window.emptyGuid;

        function deleteFriendLink(friendlinkid) {
            callApi(`/api/friendlink/${friendlinkid}`,
                'DELETE',
                {},
                (resp) => {
                    document.querySelector(`#tr-${friendlinkid}`).remove();
                });
        }

        function initCreateFriendLink() {
            fid = window.emptyGuid;
            document.querySelector('#edit-form').reset();
            editCanvas.show();
        }

        function editFriendLink(id) {
            callApi(`/api/friendlink/${id}`, 'GET', {},
                async (resp) => {
                    var data = await resp.json();
                    fid = id;
                    document.querySelector('#EditLinkRequest_Title').value = data.title;
                    document.querySelector('#EditLinkRequest_LinkUrl').value = data.linkUrl;
                    document.querySelector('#EditLinkRequest_Rank').value = data.rank;
                    editCanvas.show();
                });
        }

        function deleteFriendLinkConfirm(id) {
            var cfm = confirm("Delete Confirmation?");
            if (cfm) deleteFriendLink(id);
        }

        function handleSubmit(event) {
            event.preventDefault();

            var httpVerb = fid == window.emptyGuid ? 'POST' : 'PUT';
            var apiAddress = fid == window.emptyGuid ? `/api/friendlink` : `/api/friendlink/${fid}`;

            const data = new FormData(event.target);
            const value = Object.fromEntries(data.entries());

            callApi(apiAddress,
                httpVerb,
                {
                    id: fid,
                    title: value["EditLinkRequest.Title"],
                    linkUrl: value["EditLinkRequest.LinkUrl"],
                    rank: value["EditLinkRequest.Rank"]
                },
                (resp) => {
                    document.querySelector('#edit-form').reset();
                    $("#editFriendlinkModal").modal('hide');
                    window.location.reload();
                });
        }

        const form = document.querySelector('#edit-form');
        form.addEventListener('submit', handleSubmit);
    </script>
}

@section admintoolbar {
    <div class="admin-toolbar pb-2 border-bottom mb-3">
        <a class="btn btn-outline-accent" href="javascript:initCreateFriendLink();">
            <i class="bi-plus-lg"></i>
            @SharedLocalizer["New"]
        </a>

        <a class="btn btn-outline-accent" href="javascript:exportCSV('/api/friendlink/list','moonglade-friendlink.csv');">
            <i class="bi-filetype-csv"></i>
            @SharedLocalizer["Export"]
        </a>
    </div>
}

<div>
    @foreach (var item in Model.Links.OrderBy(m => m.Rank).ThenBy(m => m.Title))
    {
        <div class="p-3 mb-2 rounded-3 shadow-sm border bg-white">
            <div id="tr-@item.Id" class="row">
                <div class="col">
                    <h6>
                        <span class="badge bg-accent1 me-1">@item.Rank</span> @item.Title
                    </h6>
                    <div>
                        <a href="@item.LinkUrl" target="_blank">@item.LinkUrl</a>
                    </div>
                </div>
                <div class="col-auto">
                    <a href="javascript:editFriendLink('@item.Id');" class="btn btn-sm btn-outline-accent btn-edit"><i class="bi-pen"></i></a>
                    <a href="javascript:deleteFriendLinkConfirm('@item.Id');" class="btn btn-sm btn-outline-danger btn-delete"><i class="bi-trash"></i></a>
                </div>
            </div>
        </div>
    }

    @Html.AntiForgeryToken()

    <p class="text-muted mt-4">@SharedLocalizer["* Note: Friend link cache refreshes every 30 minutes, you may need to wait for some time to see the new data."]</p>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editLinkCanvas" aria-labelledby="editLinkCanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="editLinkCanvasLabel">@SharedLocalizer["Friend Link Information"]</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="edit-form" method="post">
            <div class="mb-3">
                <label class="form-label" asp-for="EditLinkRequest.Title"></label>
                <input asp-for="EditLinkRequest.Title" class="form-control" required />
            </div>
            <div class="mb-3">
                <label class="form-label" asp-for="EditLinkRequest.LinkUrl"></label>
                <input asp-for="EditLinkRequest.LinkUrl" class="form-control" required />
            </div>
            <div class="mb-3">
                <label class="form-label" asp-for="EditLinkRequest.Rank"></label>
                <input asp-for="EditLinkRequest.Rank" class="form-control" required />
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-accent">@SharedLocalizer["Submit"]</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">@SharedLocalizer["Cancel"]</button>
            </div>
        </form>
    </div>
</div>
